<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>iTags</title>
	<link rel="stylesheet" type="text/css" href="../src/itags.css" />
	<script type="text/javascript" src="../src/lib/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../src/itags.js"></script>
	<style type="text/css">
		.col1, .col1 {
			width: 50%;
			float: left;
		}

		.col1 .item, .col2 .item {
			display: block;
			margin: 0 0 1em;
		}
	</style>
	<script type="text/javascript">

		function log(message)
		{
			if (window.console && window.console.log)
			{
				window.console.log(message);
			}
			else
			{
				alert(message);
			}
		}

		var hints = [
			'.net',
			'ajax',
			'android',
			'apple',
			'c',
			'cms',
			'css',
			'firefox',
			'flash',
			'gmail',
			'google',
			'google chrome',
			'html',
			'icq',
			'internet explorer',
			'iphone',
			'ipod',
			'java',
			'javascript',
			'jquery',
			'linux',
			'livejournal',
			'mac',
			'microsoft',
			'mysql',
			'nokia',
			'open source',
			'opera',
			'php',
			'python',
			'rss',
			'ruby',
			'seo',
			'twitter',
			'ubuntu',
			'vista',
			'web',
			'web 2.0',
			'web-разработка',
			'windows',
			'windows 7',
			'yahoo',
			'youtube',
			'безопасность',
			'бизнес',
			'блогосфера',
			'браузеры',
			'будущее',
			'видео',
			'вопросы',
			'гаджеты',
			'деньги',
			'дизайн',
			'игры',
			'идея',
			'интернет',
			'исследование',
			'карма',
			'маркетинг',
			'музыка',
			'общение',
			'оптимизация',
			'подкасты',
			'поиск',
			'программирование',
			'работа',
			'разработка',
			'реклама',
			'сервисы',
			'социальные сети',
			'спам',
			'стартапы',
			'статистика',
			'фотография',
			'фриланс',
			'хабрахабр',
			'хостинг',
			'юзабилити',
			'юмор',
			'яндекс'
		];

		$(function()
		{
			$('textarea.itags').itags({
				'hints': hints
			})
				.bind('tagadd', function(evt, tag)
				{
					log('Добавлен тэг: ' + tag);
				})
				.bind('tagremove', function(evt, tag)
				{
					log('Удалён тэг: ' + tag);
				});

			$.itags($('#someid1'));

			$.itags($('#someid2'))
				.bind('tagadd', function(evt, tag)
				{
					log('Добавлена метка: ' + tag);
				})
				.bind('tagremove', function(evt, tag)
				{
					log('Удалена метка: ' + tag);
				});
		});

	</script>
</head>
<body>

<div class="col1">
	<div class="item"><textarea class="itags" rows="5" cols="35">tag1, tag2,tag3</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="35">   </textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="35">,</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="35">tag1</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="35"></textarea></div>
	<div class="item"><textarea id="someid1" rows="5" cols="35"></textarea></div>
</div>

<div class="col2">
	<div class="item"><textarea class="itags" rows="5" cols="40">tag1</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="40">tag1,tag2</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="40">tag1, tag2, tag3, tag4, tag5, tag6, tag7, tag8, tag9, tag10, tag11, tag12, tag13, tag14, tag15, tag16, tag17, tag18, tag19, tag20, tag21</textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="40"></textarea></div>
	<div class="item"><textarea class="itags" rows="5" cols="40"></textarea></div>
	<div class="item"><textarea id="someid2" rows="5" cols="40"></textarea></div>
</div>

</body>
</html>
